import {NavLink, Outlet} from "react-router-dom";
import './Nav.css'

function navBar() {
    return (
        <>
            <header className="navBar">
                <h1>React Router</h1>
            </header>
            <nav className="navBar">
                <ul className="navBar">
                    <li className="navBar__links">
                        <NavLink to="/">Home</NavLink>
                    </li>
                    <li className="navBar__links">
                        <NavLink to="posts">Posts</NavLink>
                    </li>
                    <li className="navBar__links">
                        <NavLink to="carousel">Carousel</NavLink>
                    </li>
                    <li className="navBar__links">
                        <NavLink to="questions">Questions</NavLink>
                    </li>
                    <li className="navBar__links">
                        <NavLink to="randomQuote">RandomQuote</NavLink>
                    </li>
                    <li className="navBar__links">
                        <NavLink to="shoppingList">shoppingList</NavLink>
                    </li>
                    <li className="navBar__links">
                        <NavLink to="userSearch">UserSearch</NavLink>
                    </li>
                </ul>
            </nav>

            <Outlet/>
        </>
    )
}

export default navBar